<template>
  <el-card shadow="hover" :body-style="{ padding: '0px' }">
    <el-form
      :model="cardForm"
      label-width="100px"
      style="padding: 0px"
      size="mini"
    >
      <div v-show="isModel">
        <el-divider><span style="color: #b5b4b4">属性</span></el-divider>
      </div>

      <div style="margin: 0px 20px">
        <!--        分类-->
        <el-form-item
          v-show="!isModel"
          class="input-item-class"
          label="分类编号:"
          prop="userame"
        >
          <!--        <el-input v-model="cardForm.preId" readonly ></el-input>-->
          <span>{{ cardForm.preId }}</span>
        </el-form-item>
        <el-form-item
          v-show="!isModel"
          class="input-item-class"
          label="分类名称:"
          prop="pwd"
        >
          <!--        <el-input v-model="cardForm.name" readonly></el-input>-->
          <span>{{ cardForm.name }}</span>
        </el-form-item>
        <el-form-item
          v-show="!isModel"
          class="input-item-class"
          label="描述:"
          prop="nickName"
        >
          <!--        <el-input v-model="cardForm.description" readonly></el-input>-->
          <span>{{ cardForm.description }}</span>
        </el-form-item>
        <!--模型-->
        <el-form-item
          v-show="isModel"
          class="input-item-class"
          label="模型编号:"
          prop="userame"
        >
          <!--        <el-input v-model="cardForm.preId" readonly></el-input>-->
          <span>{{ cardForm.preId }}</span>
        </el-form-item>
        <el-form-item
          v-show="isModel"
          class="input-item-class"
          label="模型名称:"
          prop="pwd"
        >
          <!--        <el-input v-model="cardForm.name" readonly></el-input>-->
          <span>{{ cardForm.name }}</span>
        </el-form-item>
        <el-form-item
          v-show="isModel"
          class="input-item-class"
          label="描述:"
          prop="nickName"
        >
          <!--        <el-input v-model="cardForm.description" readonly></el-input>-->
          <span>{{ cardForm.description }}</span>
        </el-form-item>

        <el-form-item v-show="isModel" class="input-item-class" label="单位:">
          <!--        <el-input v-model="cardForm.organizationName" readonly></el-input>-->
          <span>{{ cardForm.organizationName }}</span>
        </el-form-item>
        <el-form-item v-show="isModel" class="input-item-class" label="型号:">
          <!--        <el-input v-model="cardForm.modelNum" readonly></el-input>-->
          <span>{{ cardForm.modelNum }}</span>
        </el-form-item>
        <el-form-item v-show="isModel" class="input-item-class" label="专业:">
          <!--        <el-input v-model="cardForm.specialityName" readonly></el-input>-->
          <span>{{ cardForm.specialityName }}</span>
        </el-form-item>
        <el-form-item v-show="isModel" class="input-item-class" label="部件:">
          <!--        <el-input v-model="cardForm.modelNumPart" readonly></el-input>-->
          <span>{{ cardForm.modelNumPart }}</span>
        </el-form-item>
        <el-form-item
          v-show="isModel"
          class="input-item-class"
          label="创建用户:"
        >
          <!--        <el-input v-model="cardForm.createrPreId" readonly></el-input>-->
          <span>{{ cardForm.createrPreId }}</span>
        </el-form-item>
        <el-form-item v-show="isModel" class="input-item-class" label="时间:">
          <!--        <el-input v-model="cardForm.createTime6" readonly></el-input>-->
          <span>{{ cardForm.createTime6 }}</span>
        </el-form-item>
        <el-form-item
          v-show="isModel"
          class="input-item-class"
          label="版本号编码:"
        >
          <!--        <el-input v-model="cardForm.versionNum" readonly></el-input>-->
          <span>{{ cardForm.versionNum }}</span>
        </el-form-item>
        <el-form-item
          v-show="isModel"
          class="input-item-class"
          label="自由编码:"
        >
          <!--        <el-input v-model="cardForm.freeNum" readonly></el-input>-->
          <span>{{ cardForm.freeNum }}</span>
        </el-form-item>
      </div>
      <div v-show="isModel">
        <el-divider><span style="color: #b5b4b4">附件</span></el-divider>
      </div>

      <!--      <el-form-item v-show="isModel" class="input-item-class download-file-class" label="模型文件:" prop="flag">-->
      <!--&lt;!&ndash;        <el-input v-model="cardForm.fileName" readonly></el-input>&ndash;&gt;-->
      <!--&lt;!&ndash;        <span>{{cardForm.fileName}}</span>&ndash;&gt;-->
      <!--        <i class="el-icon-document"></i>-->
      <!--        <el-button type="text" @click="fileDownLoad(cardForm.diskPath)">{{cardForm.fileName}}-->
      <!--          <span v-if="cardForm.version != null">({{cardForm.version}})</span>-->
      <!--        </el-button>-->
      <!--        <el-button type="text" @click="fileDownLoad(cardForm.diskPath)">下载</el-button>-->
      <!--      </el-form-item>-->

      <el-card v-show="isModel" class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>模型文件</span>
        </div>
        <div style="margin-left: 0px">
          <i class="el-icon-document"></i>
          <el-button type="text" @click="fileDownLoad(cardForm.diskPath)">
            {{ cardForm.fileName }}
            <span v-if="cardForm.version != null">
              ({{ cardForm.version }})
            </span>
          </el-button>
          <el-button type="text" @click="fileDownLoad(cardForm.diskPath)">
            下载
          </el-button>
        </div>
      </el-card>
    </el-form>
  </el-card>
</template>

<script>
  import { getAction, downloadAction } from '@/api/action'

  export default {
    name: 'DataBaseInfo',
    props: {
      baseinfo: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        cardForm: {
          preId: undefined,
          name: undefined,
          remark: undefined,
          version: undefined,
          fileName: undefined,
        },
        isModel: false,
        baseUrl: {
          classifyDetail: '/presoftasim/resourcedata/classification/classify',
          modelDetail: '/presoftasim/resourcedata/modelversion/detail',
          downloadUrl: '/presoftasim/common/downloadFile',
        },
      }
    },
    watch: {
      // 'baseinfo.objectType'(newValue, oldValue){
      //   alert(newValue)
      //   this.isModel = newValue === 'model';
      // },
      baseinfo(newValue, oldValue) {
        this.isModel = newValue.objectType === 'model'
        this.getDetail(this.baseinfo)
      },
    },
    methods: {
      getDetail(query) {
        if (this.isModel) {
          getAction(this.baseUrl.modelDetail, { oid: query.oid }).then(
            (response) => {
              this.cardForm = response.data
            }
          )
        } else {
          getAction(this.baseUrl.classifyDetail, query).then((response) => {
            this.cardForm = response.data
          })
        }
      },
      fileDownLoad(filePath) {
        // let url = this.baseUrl.downloadUrl + fileName;
        downloadAction(this.baseUrl.downloadUrl, { filePath: filePath }).then(
          (res) => {
            if (!res) {
              this.$message.warning('文件下载失败')
              return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
              window.navigator.msSaveBlob(
                new Blob([data], { type: 'application/vnd.ms-excel' }),
                this.cardForm.fileName
              )
            } else {
              let url = window.URL.createObjectURL(
                new Blob([res], { type: 'application/vnd.ms-excel' })
              )
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', this.cardForm.fileName)
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) //下载完成移除元素
              window.URL.revokeObjectURL(url) //释放掉blob对象
            }
          }
        )
      },
    },
  }
</script>

<style lang="scss" scoped>
  .input-item-class {
    /*padding: 0;*/
    /*margin-bottom: 0px;*/
    & .el-form-item__content {
      & .el-input {
        & .el-input__inner {
          border: 0px;
        }
      }
    }
  }
  .download-file-class {
    & .el-form-item__content {
      display: flex;
    }
  }
  .el-input__inner {
    border: 0px;
  }
  .text {
    font-size: 12px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
    padding: 0px;
  }
</style>
